<template>
    <div class="container">
        <Header></Header>
        <div class="main">
           <div v-for="item in template" :key="item.id">
               <div class="left">
                <img :src=item.coverImg alt="">
               </div>
               <div class="right">
                 <h1>{{ item.title }}</h1>
                 <p>{{ item.desc }}</p>
                 <p> 该模版由{{item.author}}创作</p>
                 <p>扫一扫，手机预览</p>
                 <button>使用模版</button>
                 <button>下载图片海报</button>
               </div>
           </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import Header from '../components/header.vue'
import axios from 'axios'
import {useRoute} from 'vue-router'
const route = useRoute()
 const template = ref([])
    const gettemplate =(id)=>{
          const config ={
            url:`/api/v2/template/${id}`,
            method:'get',
          }
          axios(config).then(res=>{
            console.log(res)
            const {data} = res
            template.value = data.data
          })
    }
onMounted(()=>{
    gettemplate(route.params.id)
})
</script>
<style lang="scss" scoped>
.container{
  width: 100vw;
  height: 100vh;

  .main{
    width: 100%;
    height: 80%;
    .left{
      float: left;
      width: 50%;
      height: 10rem;
      img{
        width: 80%;
      }
    }
    .right{
        margin-left: 50%;
        width: auto;
        height: 10rem;
        button{
          border: none;
          width: 2rem;
          height: 0.6rem;
        }
        :nth-child(5){
          background: skyblue;
          color: #fff;
          
        }
        :nth-child(6){
          color: skyblue;
        }
    }
  }
}

</style>